<template>
  <div>
    <div>
      <el-form :inline="true" :model="searchForm" ref="searchForm" class="demo-form-inline">
        <el-form-item label="产品名称" prop="name">
          <el-input v-model="searchForm.name" placeholder="请输入内容" size="small"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search" size="small">搜索</el-button>
          <el-button @click="resetSearchForm('searchForm')" size="small">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-button type="error" @click="batchDelete" size="small">批量删除</el-button>
      <el-button type="success" @click="DialogOpen('新增产品')" size="small">新增</el-button>
      <el-button type="primary" plain size="small" @click="dialogExcelVisible = true" icon="el-icon-upload2">导入
      </el-button>
      <el-button type="primary" plain size="small" @click="downloadExcel" icon="el-icon-download">导出</el-button>
    </div>
    <el-table v-loading="loading" :data="productList" border style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50">
      </el-table-column>
      <el-table-column prop="pcode" label="产品编码">
      </el-table-column>
      <el-table-column prop="name" label="产品名称">
      </el-table-column>
      <el-table-column prop="num" label="库存数量">
      </el-table-column>
      <el-table-column prop="unit" label="单位">
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="DialogOpen2('修改产品',scope.row)">修改</el-button>
          <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="totalPage">
    </el-pagination>

    <el-dialog :title="dialogName" :visible.sync="dialogFormVisible">
      <el-form :model="productForm">
        <el-form-item label="产品编码">
          <el-input v-model="productForm.pcode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input v-model="productForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="库存数量">
          <el-input v-model="productForm.num" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位">
          <el-input v-model="productForm.unit" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitType()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 上传excel的对话框 -->
    <el-dialog title="上传计量单位Excel" :visible.sync="dialogExcelVisible" width="40%">
      <el-upload class="upload-demo" drag action="http://127.0.0.1:8888/product/uploadExcel" accept=".xlsx,.xls"
        :on-success="uploadExcelSuccess" :on-error="uploadExcelError" multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传.xlsx,.xls文件，且不超过500kb</div>
      </el-upload>
    </el-dialog>
  </div>
</template>
<script>
import { getAll, update, delById, batchDel, add } from '@/api/product.js'
export default {
  data() {
    return {
      loading: false,
      productList: [],
      selectedRows: [],
      currentPage: 1,
      pageNum: 1,
      pageSize: 5,
      totalPage: 0,
      searchForm: {
        name: null
      },
      dialogName:"新增产品",
      dialogFormVisible: false,
      productForm: {
        pcode: "",
        name: "",
        num: 0,
        unit: ""
      },
      ids:[],
      dialogExcelVisible: false
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchDate()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.fetchDate()
    },
    handleSelectionChange(val) {
      this.ids = []
      this.selectedRows = val;
      for (var i = 0; i < val.length; i++) {
        this.ids.push(val[i].id)
      }
    },
    fetchDate() {
      this.listLoading = true
      getAll({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.productList = res.data.list
        this.totalPage = res.data.total
        this.loading = false
      })
    },
    search() {
      this.loading = true
      getAll({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        name: this.searchForm.name
      }).then(res => {
        if (res.code == 200) {
          this.productList = res.data.list
          this.totalPage = res.data.total
          this.pageNum = 1
          this.loading = false
        }

      })
    },
    resetSearchForm(){
      this.searchForm = {}
      this.pageNum = 1
      this.fetchDate()
    },
    DialogOpen(dialogName) {
      this.productForm = {
        pcode: "",
        name: "",
        num: 0,
        unit: ""
      }

      this.dialogName = dialogName
      this.dialogFormVisible = true
    },
    DialogOpen2(dialogName,row) {
      this.productForm = row
      this.dialogName = dialogName
      this.dialogFormVisible = true
    },
    submitType() {
      if (this.dialogName === '新增产品') {
        add(this.productForm).then(res => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.dialogFormVisible = false
            this.fetchDate()
          }else{
            this.$message({
              message: '新增失败',
              type: 'error'
            })
          }

        })
      }else if (this.dialogName === '修改产品') { 
        update(this.productForm).then(res => { 
          if (res.code == 200) { 
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.dialogFormVisible = false
            this.fetchDate()
          }else{
            this.$message({
              message: '修改失败',
              type: 'error'
            })
          }
        })
      }
    },
    del(id) { 
      delById({id:id}).then(res => { 
        if (res.code == 200) { 
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.fetchDate()
        }else{
          this.$message({
            message: '删除失败',
            type: 'error'
          })
        }
      })
    },
    batchDelete(){
      batchDel(this.ids).then(res => {
        if (res.code == 200) { 
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.fetchDate()
        }else{
          this.$message({
            message: '删除失败',
            type: 'error'
          })
        }
      })
    },
    downloadExcel() {
      this.$confirm('确定要导出数据吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        // 方案1: 原生js方式发起导出excel请求,后端设置响应格式
        window.location.href = "http://127.0.0.1:8888/product/download"
        // 方案1的话后端需要设置响应格式和内容
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消导出数据！'
        })
      })
    },
    uploadExcelSuccess() {
      this.$message({
        type: "success",
        message: "上传成功"
      })
      this.dialogExcelVisible = false;
      this.getList();
    },
    uploadExcelError(){
      this.$message({
        type: "erroe",
        message: "上传失败"
      })
      this.dialogExcelVisible = false;
      this.getList();
    }

  },
  created() {
    this.fetchDate()
  },
}
</script>
<style scoped></style>